import * as faceapi from "face-api.js";

main()

async function main(){
    //加载模型权重文件
    await faceapi.nets.ssdMobilenetv1.loadFromUri('http://127.0.0.1:8888/weights')
    await faceapi.nets.faceLandmark68Net.loadFromUri('http://127.0.0.1:8888/weights')
    await faceapi.nets.ageGenderNet.load('http://127.0.0.1:8888/weights')


    const input = document.getElementById('image')

    // 画布
    const canvas = faceapi.createCanvasFromMedia(input)
    const box = document.getElementById('box')
    box.prepend(canvas)
    const displaySize = {width:input.width,height:input.height}
    faceapi.matchDimensions(canvas,displaySize)

    // face特征
    const results = await faceapi.detectAllFaces(input).withFaceLandmarks().withAgeAndGender()
    faceapi.matchDimensions(canvas, input)

    const resizedResults = faceapi.resizeResults(results, input)
    faceapi.draw.drawDetections(canvas,resizedResults)

    resizedResults.forEach(result=>{
        const {age,gender,genderProbability} = result 
        new faceapi.draw.DrawTextField(
            [
                `${faceapi.utils.round(age, 0)} years`,
                `${gender} (${faceapi.utils.round(genderProbability)})`
            ],
            result.detection.box.bottomLeft
        ).draw(canvas)
    })

    closeLoading()
}